🌈 สวัสดีเพื่อน ๆ ทุกคนวันนี้แอดจะพาเพื่อน ๆ มาดูคว...

🌈 สวัสดีเพื่อน ๆ ทุกคนวันนี้แอดจะพาเพื่อน ๆ มาดูความแตกต่างของ XPath และ CSS Selector กันนน~
.
⚡ ซึ่งทั้งสองเป็นเครื่องมือที่มีประสิทธิภาพที่ใช้ในการเข้าถึง Element ต่าง ๆ ของเว็บและสามารถเข้าถึง DOM ทั้งหมดของเว็บไซต์ได้อย่างรวดเร็วนั่นเอง ไม่มีตัวไหนดีกว่ากันอย่างชัดเจน เพราะแต่ละอันก็มีคุณสมบัติที่ดีของตัวมันเอง
.
ไปดูกันว่าทั้งสองนั้นต่างกันยังไง และมีรูปแบบการเขียนยังไง หากพร้อมแล้วไปดูกันเลยจ้า !!
.
👉 CSS Selector
ใช้สำหรับค้นหาหรือเลือก HTML Element ที่เราต้องการ ซึ่งจะใช้ในการทดสอบ หรือดึงข้อมูลจากหน้าเว็บนั่นเอง
.
📑 ตัวอย่าง

.
ต้องการดึง Element จากโค้ดด้านบนมาเป็น CSS Selector จะได้ดังนี้
#close
.
✨ ข้อดีของ CSS Selector
🔹 เร็วกว่า XPath
🔹 เรียนรู้และนำไปใช้ได้ง่ายกว่า
🔹 ใช้ได้กับทุกเบราว์เซอร์
🔹 ค้นหา Element ได้ง่าย
.
👉 XPath
ย่อมาจาก XML Path เป็นตัวช่วยระบุ Element ต่าง ๆ บน XML Document หรือบนหน้าเว็บที่ต้องการดึงข้อมูล หรือทดสอบ
.
📑 ตัวอย่าง

.
ต้องการดึง Element จากโค้ดด้านบนมาเป็น XPath จะได้ดังนี้
//*[@id="close"]
.
✨ ข้อดีของ XPath
🔸 ช่วยให้สามารถเข้าถึง HTML DOM ได้อย่างง่ายดาย
🔸 รองรับเบราว์เซอร์รุ่นเก่า ๆ
🔸 มีความยืดหยุ่นกว่า CSS Selector
🔸 หากไม่ทราบชื่อ Element ก็สามารถค้นหาได้ง่าย
.
เป็นยังไงกันบ้างงง ? พอจะเห็นความแตกต่างของทั้งสองแล้วเนอะ และหากใครมีอะไรนอกเหนือจากนี้ คอมเมนต์ไว้ด้านล่างได้เลยน้าาาา และหวังว่าจะเป็นประโยชน์กับเพื่อน ๆ นะ 🥰
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน

---